<!-- route: // name: /-->
<template>
  <div class="firstAuth">
    <el-form :model="companyInfo" :rules="firstModelRules" ref="firstModel">
      <el-form-item prop="name" label="企业名称">
        <el-tooltip placement="top-start" effect="dark">
          <el-button type="text" icon="el-icon-info"></el-button>
          <div slot="content">
            <span>若营业执照上企业名称为空或*，此处<br/>请输入法定代表人姓名</span>
          </div>
        </el-tooltip>
        <el-input v-model="companyInfo.companyName" placeholder="企业名称" show-word-limit :maxlength="100"/>
      </el-form-item>
      <el-form-item prop="number" class="floatLabel">
        <template slot="label">
          <div class="numberTo">
            <span>统一社会信用代码/工商注册号</span>
            <el-button type="text" icon="el-icon-view" @click="overView">示例</el-button>
          </div>
        </template>
        <el-input v-model="companyInfo.creditCode" placeholder="统一社会信用代码/工商注册号" show-word-limit :maxlength="18"/>
      </el-form-item>
      <el-form-item prop="person" label="法定代表人/负责人">
        <el-tooltip content="Top center" placement="top">
          <el-button type="text" icon="el-icon-info"></el-button>
          <div slot="content">
            <span>合伙人企业输入执行食物合伙人名称，多法人<br/>企业输入多法人姓名，如：张三、李四...</span>
          </div>
        </el-tooltip>
        <el-input v-model="companyInfo.faRen" placeholder="法定代表人/负责人" show-word-limit :maxlength="100"/>
      </el-form-item>
      <el-form-item>
        <label style="cursor: pointer">
          <el-checkbox v-model="agreement">我已阅读并同意</el-checkbox>
          <el-button type="text" @click="openPrivacyDialog">《大鸿签隐私政策》</el-button>
        </label>
      </el-form-item>
      <el-form-item>
        <div style="width: 100%;margin-bottom: 20px">
          <el-button type="primary" style="width: 100%" @click="agree" :loading="agreeLoading">同意并继续</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" @close="closeDialog">
      <template slot="title"></template>
      <template slot="footer"></template>
      <div class="diaImg">
        <img src="https://asset.tsign.cn/apps/realname_v3/prod/2.0.2/img/yyyyUScode.9cf44f9d.jpg" alt="">
      </div>
    </el-dialog>
    <el-dialog width="28%" title="协议提示" :visible.sync="agreementVisible" @close="closeAgreementDialog">
      <template slot="footer"></template>
      <div>
        <p style="line-height: 20px">
          <span>进入下一步前，请先阅读并同意</span>
          <el-button type="text" @click="openPrivacyDialog">《大鸿签隐私政策》</el-button>
        </p>
        <div style="width: 100%;display: flex;align-items: center;justify-content: flex-end;margin-top: 10px">
          <el-button @click="agreeDown">不同意</el-button>
          <el-button type="primary" @click="agreeSet">同意并继续</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog fullscreen title="大鸿签隐私政策" :visible.sync="dialogPrivacyVisible" @close="closePrivacyVisible" v-loading="dialogPrivacyLoading">
      <div slot="footer"></div>
      <div v-html="content"></div>
    </el-dialog>
  </div>
</template>

<script>

import { postAddEnterprise } from "@/api/company";
import Cookies from "js-cookie";
import { getPrivacyAgreement } from "@/api";

const firstModelRef = {
  companyName: '',
  creditCode: '',
  faRen: '',
}

export default {
  name: "firstAuth",
  props:{
    companyInfo: {
      type: Object,
      require: true,
      default: firstModelRef
    }
  },
  data() {
    return {
      agreement: false,
      agreeLoading: false,
      firstModelRules: {
        companyName: [{required: true, message: '请填写企业名称', trigger: 'blur'}],
        creditCode: [{required: true, message: '请填写统一社会信用代码/工商注册号', trigger: 'blur'}],
        faRen: [{required: true, message: '请填写法定代表人/负责人', trigger: 'blur'}],
      },
      dialogVisible: false,
      agreementVisible: false,
      dialogPrivacyVisible: false,
      dialogPrivacyLoading: false,
      content: null
    }
  },
  mounted() {},
  methods: {
    closeDialog(){
      this.dialogVisible = false
    },
    overView(){
      this.dialogVisible = true
    },
    agree(){
      this.$refs.firstModel.validate(bool=>{
        if(bool){
          if(!this.agreement){
            this.agreementVisible = true
          }else{
            this.agreeLoading = true
            // 获取企业信息和二维码、邀请链接
            console.log('添加企业到认证列表');
            postAddEnterprise({userId: Cookies.get("admin_id"),legalPerson: this.companyInfo.faRen,enterpriseName: this.companyInfo.companyName,creditCode: this.companyInfo.creditCode}).then(res=>{
              this.agreeLoading = false
              if(res.code === 200){
                this.agreement = true
                this.$emit("goIndex", 2)
                this.$emit("getCompanyInfo", res.result)
                console.log('添加成功获取详情', res.result);
              }
            })
          }
        }
      })
    },
    agreeDown(){
      this.agreementVisible = false
    },
    agreeSet(){
      this.agreementVisible = false
      this.agreement = true
      this.agree()
    },
    closeAgreementDialog(){
      this.agreementVisible = false
    },
    openPrivacyDialog(){
      this.dialogPrivacyVisible = true
      this.dialogPrivacyLoading = true
        getPrivacyAgreement().then(res => {
          this.dialogPrivacyLoading = false
          this.$nextTick(()=>{
            this.content = res.result.data.agreement
          })
        })
    },
    closePrivacyVisible(){
      this.dialogPrivacyVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.firstAuth{
  padding: 0 200px;
  :deep(.el-form-item__label){
    display: flex;
    align-items: center;
  }
  .floatLabel{
    :deep(.el-form-item__label){
      float: unset;
    }
    .numberTo{
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
    }
  }
  .diaImg{
    img{
      width: 100%;
      height: auto;
    }
  }
}
</style>